<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flu - 局域网文件快传工具</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./xchatuser.js" defer></script>
  <script src="./index.js" defer></script>
</head>
<body>
  <!-- 拖拽提示 -->
  <div class="dragtip">
    <div class="dragtip-content">
      <svg viewBox="0 0 24 24" width="48" height="48">
        <path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"/>
      </svg>
      <h1>松开发送文件</h1>
    </div>
  </div>

  <!-- 主界面 -->
  <div class="container">
    <!-- 左侧面板 -->
    <div class="left">
      <!-- 聊天区域 -->
      <div class="chat-wrapper">
        <div class="welcome-message">
          <div class="welcome-header">
            <svg viewBox="0 0 24 24" width="48" height="48">
              <path fill="currentColor" d="M14,2H6C4.89,2 4,2.89 4,4V20C4,21.11 4.89,22 6,22H18C19.11,22 20,21.11 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
            </svg>
            <h2>flu</h2>
          </div>
          <div class="welcome-desc">
            <p>简单快速的局域网文件传输工具</p>
            <div class="feature-list">
              <div class="feature-item">
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
                </svg>
                <span>设置昵称</span>
                <p>点击左上角用户图标</p>
              </div>
              <div class="feature-item">
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
                </svg>
                <span>发送文件</span>
                <p>点击文件图标或拖拽文件</p>
              </div>
              <div class="feature-item">
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path fill="currentColor" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z" />
                </svg>
                <span>即时聊天</span>
                <p>支持文字消息和表情</p>
              </div>
              <div class="feature-item">
                <svg viewBox="0 0 24 24" width="24" height="24">
                  <path fill="currentColor" d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" />
                </svg>
                <span>安全传输</span>
                <p>数据仅在局域网内传输</p>
              </div>
            </div>
          </div>
          <div class="welcome-footer">
            <p class="tip">右侧可以看到在线用户列表 →</p>
          </div>
        </div>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="toolbar-left">
          <!-- 昵称设置按钮 -->
          <button class="toolbar-btn nickname-btn" title="设置昵称">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </button>
          <!-- 文件发送按钮 -->
          <button class="toolbar-btn file-btn" title="发送文件">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
            </svg>
          </button>
          <!-- 清空聊天按钮 -->
          <button class="toolbar-btn clear-btn" title="清空聊天记录">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/>
            </svg>
          </button>
          <!-- 截图按钮 -->
          <button class="toolbar-btn screenshot-btn" title="发送截图">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>
            </svg>
          </button>
          <!-- 语音消息按钮 -->
          <button class="toolbar-btn voice-btn" title="发送语音">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
            </svg>
          </button>
          <!-- 代码片段按钮 -->
          <button class="toolbar-btn code-btn" title="发送代码片段">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"/>
            </svg>
          </button>
        </div>
        <div class="toolbar-right">
          <!-- 移动端切换用户列表按钮 -->
          <button class="toolbar-btn toggle-users-btn mobile-only" title="切换在线用户列表">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
            </svg>
          </button>
          <!-- 发送消息按钮 -->
          <button class="toolbar-btn send-btn" title="发送消息">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 消息输入框 -->
      <div class="input-wrapper">
        <textarea id="messageInput" class="txt-msg" placeholder="输入消息，按Enter发送，Shift+Enter换行" onkeydown="enterTxt(event)"></textarea>
      </div>
    </div>

    <!-- 右侧面板 -->
    <div class="right">
      <div class="users-header">
        <h3>在线用户</h3>
        <span class="user-count">0</span>
      </div>
      <ul id="users"></ul>
    </div>
  </div>

  <!-- 移动端遮罩 -->
  <div class="mobile-overlay"></div>

  <!-- 用户选择模态框 -->
  <div class="modal" id="userSelectModal">
    <div class="modal-content">
      <h3>选择接收用户</h3>
      <div class="user-list" id="userSelectList"></div>
      <div class="file-info-preview">
        <div class="file-icon">📎</div>
        <div class="file-details">
          <div class="file-name"></div>
          <div class="file-size"></div>
        </div>
      </div>
      <div class="progress-container">
        <div class="progress-text">正在发送...</div>
        <div class="progress-bar">
          <div class="progress-bar-inner"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" onclick="cancelSendFile()">取消</button>
        <button class="confirm-btn" onclick="confirmSendFile()">发送</button>
      </div>
    </div>
  </div>

  <!-- 昵称设置模态框 -->
  <div class="modal" id="nicknameModal">
    <div class="modal-content">
      <h3>设置昵称</h3>
      <div class="nickname-input-container">
        <input type="text" id="nicknameInput" maxlength="10" placeholder="请输入昵称（最多10个字符）">
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" onclick="closeNicknameModal()">取消</button>
        <button class="confirm-btn" onclick="saveNickname()">保存</button>
      </div>
    </div>
  </div>

  <!-- 房间密码模态框 -->
  <div class="modal" id="passwordModal">
    <div class="modal-content">
      <h3>请输入房间密码</h3>
      <div class="password-input-container">
        <input type="password" id="roomPasswordInput" placeholder="请输入密码" autocomplete="off">
      </div>
      <div class="modal-footer">
        <button class="confirm-btn" onclick="submitRoomPassword()">确认</button>
      </div>
    </div>
  </div>

  <!-- 文件接收模态框 -->
  <div class="modal" id="fileReceiveModal">
    <div class="modal-content">
      <h3>收到文件</h3>
      <div class="file-info-preview">
        <div class="file-icon">📎</div>
        <div class="file-details">
          <div class="file-name"></div>
          <div class="file-size"></div>
          <div class="file-from"></div>
        </div>
      </div>
      <div class="progress-container">
        <div class="progress-text">正在接收...</div>
        <div class="progress-bar">
          <div class="progress-bar-inner"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" onclick="rejectFile()">拒绝</button>
        <button class="confirm-btn" onclick="acceptFile()">接收</button>
      </div>
    </div>
  </div>
</body>
</html> 